{extend name="common/index"}
{block name="content"}
<div class="layui-row">
    <form id="editForm" class="layui-form" action="">
        <input type="hidden" name="role_id" id="role_id" value="{$data.role_id|default=''}">
        <input type="hidden" name="auth" id="auth" value="{$data.auth|default=''}">
        <div class="layui-col-xs12 layui-col-sm5">
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red;">*&nbsp;</span>角色名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="role_name" value="{$data.role_name|default=''}" placeholder="请输入" class="layui-input" lay-verify="required">
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm7">
            <div class="layui-form-item">
                <label class="layui-form-label">用途描述：</label>
                <div class="layui-input-block">
                    <input type="text" name="describe" value="{$data.describe|default=''}" placeholder="请输入" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs12">
                <table id="roleTable"  lay-filter="roleTable"></table>
            </div>
        </div>
        <div class="tpl-form-action">
            <button class="layui-btn layui-btn-radius layui-btn-lg" lay-submit lay-filter="formSubmit">保存</button>
        </div>
    </form>
</div>
{/block}

{block name="script"}
<script type="text/javascript">
    var table_data;
    layui.use(['form', 'table'], function () {
        var form = layui.form;
        var table = layui.table;

        //表格数据渲染
        table.render({
            elem: '#roleTable'
            , url: '{:url("getMenuList")}?role_id=' + $('#role_id').val()
            , page: false
            ,limit: table_limit
            , cols: [[
                {type: 'numbers', title: '序号', width: 80}
                , {field: 'pid_text', title: '上级菜单', width: 100}
                , {field: 'menu_name', title: '菜单名称', minWidth: 150}
                , {field: 'url', title: '链接地址', minWidth: 250}
                , {field: 'description', title: '简介', minWidth: 80}
                , {type: 'checkbox', width: 100}
            ]]
            , done: function (res, curr, count) {
                table_data = res.data;
            }
        });

        //监听选中状态改变情况
        table.on('checkbox(roleTable)', function(obj){
            var checkState = obj.checked;
            var pid = obj.data.pid;
            $.post('{:url("Menu/getNextIds")}', {id:obj.data.menu_id}, function (result) {
                $.each(table_data, function (key,val) {
                    //更改当前菜单的上一级和下一级的选中状态
                    if ((pid == val.menu_id && checkState) || $.inArray(val.menu_id,result) != '-1') {
                        table_data[key]["LAY_CHECKED"] = checkState;//与当前操作状态保持一致
                        var index= val.LAY_TABLE_INDEX;
                        $(".layui-table-body").find('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', checkState);
                    }
                });
                form.render('checkbox');//重新渲染
                //判断是否全选
                var checkTable = table.checkStatus('roleTable');
                if (checkTable.isAll) {
                    $('.layui-table-header .layui-form-checkbox').addClass('layui-form-checked');
                }
            }, 'json');
        });

        //监听提交
        form.on('submit(formSubmit)', function(data){
            //获取当前选中的菜单id，逗号隔开
            var checkList = table.checkStatus('roleTable');
            var id_list = [];
            if (checkList.data.length>0) {
                $.each(checkList.data, function (key, val) {
                    id_list[key] = val.menu_id;
                });
            }
            id_list = id_list.join(',');
            $('#auth').val(id_list);

            var index = layer.load(2, {shade:[0.5,'#000'],time: 10*1000});
            $.post('{:url("save")}', $('#editForm').serialize(), function (result) {
                layer.close(index);
                if (result.code) {
                    layer.msg(result.msg, {shade:[0.5,'#000'],time:1000}, function () {
                        window.location.href = result.url;
                    });
                } else {
                    $('input[type="checkbox"][value="1"]').prop('disabled', true);//将“首页”设置disabled
                    layer.alert(result.msg, {icon:2, title:'保存失败！'});
                }
            }, 'json');
            return false;
        });
    });

</script>
{/block}